<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>全民快送</title>

    <!-- Bootstrap -->
    <link href="${base}/${resources}/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<#include "header.html"/>
<div class="container">

    <form id="publishJourneyForm" class="form-horizontal" role="form">
        <div class="form-group">
            <label for="startTime" class="col-xs-3 col-sm-2 control-label">出发时间</label>

            <div class="col-xs-8 col-sm-9">
                <input id="uid" type="hidden" value="${uid}"/>
                <input id="startTime" class="form-control" type="datetime-local" >
            </div>
        </div>
        <div class="form-group">
            <label for="endTime" class="col-xs-3 col-sm-2 control-label">到达时间</label>

            <div class="col-xs-8 col-sm-9">
                <input type="datetime-local" class="form-control" id="endTime"/>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 column">
                <div class="form-group">
                    <label for="sequence" class="col-xs-3 col-sm-2 control-label">行程频次</label>
                    <div class="col-xs-8 col-sm-9">
                        <select  class="form-control" id="sequence">
                            <option value="0">单次</option>
                            <option value="0">多次</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="startProvince" class="col-xs-3 col-sm-2 control-label">出发地点</label>
            <div class="col-xs-3 col-sm-3">
                <select class="form-control" id="startProvince">
                </select>
            </div>

            <div class="col-xs-3 col-sm-3">
                <select class="form-control" id="startCity">
                </select>
            </div>
            <div class="col-xs-2 col-sm-3">
                <select class="form-control" id="startZone">
                </select>
            </div>

        </div>
        <div class="form-group">
            <label for="endProvince" class="col-xs-3 col-sm-2 control-label">到达地点</label>

            <div class="col-xs-3 col-sm-3">
                <select class="form-control" id="endProvince">
                </select>
            </div>

            <div class="col-xs-3 col-sm-3">
                <select class="form-control" id="endCity">
                </select>
            </div>
            <div class="col-xs-2 col-sm-3">
                <select class="form-control" id="endZone">
                </select>
            </div>

        </div>
        <div class="form-group">
            <label for="phone" class="col-xs-3 col-sm-2 control-label">联系电话</label>
            <div class="col-xs-8 col-sm-9">
                <input type="tel" class="form-control" id="phone"/>
            </div>
        </div>
        <div class="form-group">
            <label for="trafficType" class="col-xs-3 col-sm-2 control-label">交通方式</label>
            <div class="col-xs-8 col-sm-9">
                <select id="trafficType" class="form-control">
                    <option value="0">步行</option>
                    <option value="1">驾车</option>
                    <option value="2">公交</option>
                    <option value="3">火车</option>
                    <option value="4">飞机</option>
                    <option value="5">水运</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="fee" class="col-xs-3 col-sm-2 control-label">收取费用</label>
            <div class="col-xs-8 col-sm-9">
                <div class="input-group">
                    <div class="input-group-addon">￥</div>
                    <input type="number" class="form-control" id="fee"/>
                    <div class="input-group-addon">元</div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="remark" class="col-xs-3 col-sm-2 control-label">补充说明</label>
            <div class="col-xs-8 col-sm-9">
                <input type="text" class="form-control" id="remark"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-offset-3 col-sm-offset-2 col-xs-4 col-sm-2">
                <button id="publishJourney" type="button" class="btn btn-info">发布行程</button>
            </div>
        </div>
    </form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${base}/${resources}/js/jquery-2.0.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${base}/${resources}/js/bootstrap.min.js"></script>
<script src="${base}/${resources}/js/jquery.validate.min.js"></script>
<script src="${base}/${resources}/js/jquery.json-2.4.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script type="text/javascript">

    $(function(){
        $("#navTitle").text("发布行程");
        //获取开通的地区
        var placeData={};
        var startProvinceId;
        var startCityId;
        var endProvinceId;
        var endCityId;
        $("#startProvince").change(function(){

            startProvinceId = $(this).val();
            $.each(placeData.provinces,function(index,item){
                if(item.provinceId == startProvinceId){
                    var city = "";
                    $.each(item.citys,function(index,item){
                        city += "<option value='"+item.cityId+"'>"+item.cityName+"</option>";
                    });
                    $("#startCity").empty().append(city);
                    var zone = "";
                    $.each(item.citys[0].zones,function(index,item){
                        zone += "<option value='"+item.zoneId+"'>"+item.zoneName+"</option>";
                    });
                    $("#startZone").empty().append(zone);
                }
            });

        });
        $("#startCity").change(function(){
            startProvinceId = $("#startProvince").val();
            startCityId = $(this).val();
            $.each(placeData.provinces,function(index,item){
                if(item.provinceId == startProvinceId){
                    $.each(item.citys,function(index,item){
                        if(item.cityId == startCityId){
                            var zone = "";
                            $.each(item.zones,function(index,item){
                                zone += "<option value='"+item.zoneId+"'>"+item.zoneName+"</option>";
                            });
                            $("#startZone").empty().append(zone);
                        }

                    });

                }
            });

        });

        $("#endProvince").change(function(){
            endProvinceId = $(this).val();
            $.each(placeData.provinces,function(index,item){
                if(item.provinceId == endProvinceId){
                    var city = "";
                    $.each(item.citys,function(index,item){
                        city += "<option value='"+item.cityId+"'>"+item.cityName+"</option>";
                    });
                    $("#endCity").empty().append(city);
                    var zone = "";
                    $.each(item.citys[0].zones,function(index,item){
                        zone += "<option value='"+item.zoneId+"'>"+item.zoneName+"</option>";
                    });
                    $("#endZone").empty().append(zone);
                }
            });
        });

        $("#endCity").change(function(){
            endProvinceId = $("#endProvince").val();
            endCityId = $(this).val();
            $.each(placeData.provinces,function(index,item){
                if(item.provinceId == endProvinceId){
                    $.each(item.citys,function(index,item){
                        if(item.cityId == endCityId){
                            var zone = "";
                            $.each(item.zones,function(index,item){
                                zone += "<option value='"+item.zoneId+"'>"+item.zoneName+"</option>";
                            });
                            $("#endZone").empty().append(zone);
                        }

                    });

                }
            });
        });

        $.ajax({
            type:"POST",
            contentType:"application/json;charset=utf-8",
            url:"${base}/journey/place",
            data: $.toJSON({}),
            success: function (data) {

                var province="";
                var city="";
                var zone="";
                if (data.resultCode == 0) {
                    placeData = data;
                    if(data.provinces.length>0){
                        $.each(data.provinces,function(index,item){
                            province += "<option value='"+item.provinceId+"'>"+item.provinceName+"</option>";
                        });
                        $("#startProvince").empty().append(province);
                        $("#endProvince").empty().append(province);
                        if(data.provinces[0].citys.length>0){
                            $.each(data.provinces[0].citys,function(index,item){
                                city += "<option value='"+item.cityId+"'>"+item.cityName+"</option>";
                            });
                            $("#startCity").empty().append(city);
                            $("#endCity").empty().append(city);
                            if(data.provinces[0].citys[0].zones.length>0){
                                $.each(data.provinces[0].citys[0].zones,function(index,item){
                                    zone += "<option value='"+item.zoneId+"'>"+item.zoneName+"</option>";
                                });
                                $("#startZone").empty().append(zone);
                                $("#endZone").empty().append(zone);
                            }
                        }
                    }

                }

            },
            dataType: "json"
        });

        //发布行程
        $("#publishJourney").click(function(){

            var form = $('#publishJourneyForm');
            form.validate();
            if (form.valid()) {

                $.ajax({
                    type:"POST",
                    contentType:"application/json;charset=utf-8",
                    url: "${base}/journey/publish",
                    data: $.toJSON({"uid": $("uid").val(), "type": $("#sequence").val(),
                        "startTimeStr": $("#startTime").val(),"endTimeStr": $("#endTime").val(),
                        "startProvinceId": $("#startProvince").val(),
                        "startCityId":$("#startCity").val(),"startZoneId":$("#startZone").val(),
                        "endProvinceId": $("#endProvince").val(), "endCityId": $("#endCity").val(),
                        "endZoneId": $("#endZone").val(), "phone": $("#phone").val(),
                        "trafficType": $("#trafficType").val(), "fee": $("#fee").val(),
                        "remark": $("#remark").val()
                    }),
                    success: function (data) {

                        //计算成功
                        if (data.resultCode == 0) {
                            if(confirm(data.resultMsg)){
                                window.location.href = "${base}/journey";
                            }
                        } else {//计算失败
                            alert(data.resultMsg);
                        }
                    },
                    dataType: "json"
                });
            }else{
                alert("validate fail");
            }

        });
//校验
        $("#publishJourneyForm").validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: true,
            rules: {
                startTime: {
                    required: true
                },
                endTime: {
                    required: true
                },
                phone: {
                    required: true,
                    maxlength: 255
                },
                fee:{
                    required: true,
                    min:0,
                    max:100
                },
                remark:{
                    maxlength:255
                }

            },

            messages: {
                startTime: {
                    required: "请输入出发时间"
                },
                endTime: {
                    required: "请输入到达时间"
                },
                phone: {
                    required: "请填写您的联系电话"
                },
                fee:{
                    required: "请填写收取费用",
                    min:"费用不能是负数",
                    max:"费用不能超过100元"
                },
                remark:{
                    maxlength:"备注内容过长"
                }
            },

            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },

            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
                $(e).remove();
            },

            submitHandler: function (form) {

            },
            invalidHandler: function (form) {

            }
        });
    });

</script>

</body>
</html>